<template>
	<div class="header">
		<img class="logo" src="@/assets/img/mobile/logo.png" />
		<ul class="menus" :style="{ 'display' : isaBool?'none':'block' }">
			<li><router-link to="/mobile/home">首页推荐</router-link></li>
			<li><router-link to='/mobile/booklist'>书库</router-link></li>
			<li><router-link to="/mobile/user">个人中心</router-link></li>
		</ul>
		<div>
			
		</div>
		<router-link to="/mobile/Search">
			<img src="@/assets/img/mobile/search.png" />
		</router-link>
		<!-- <div class="search" :style="{ 'width' : isaBool?'16rem':'2rem' }">
			<form :style="{ 'background-color' : isaBool?'white':'unset' }">
				<input :style="{ 'display' : isaBool?'block':'none' }" placeholder="请输入搜索的书籍名称" />
				<aside @click="isaBool = !isaBool">
					<img src="@/assets/img/mobile/search.png" />
				</aside>
			</form>
		</div> -->
	</div>
</template>

<script>
	export default {
		name: 'MobileHeader',
		data(){
			return{
				isaBool : false,			//默认不启动
			}
		},
		methods:{
		}
	}
</script>

<style scoped>
	.header{
		width: 100%;
		height: 3.5rem;
		background-color: #a68b5b;
		display: flex;
		align-items: center;
		justify-content : space-between;
		/* position: relative; //定位的元素保留原本的位置 */
		/* position: absolute; //定位的元素抛弃原本的位置，被其他标签顶替 */
		position: fixed;
		top: 0;
		z-index: 10;
	}
	.header .logo{
		margin-left: 0.5rem;
	}
	.header .menus{
		margin: 0;
		padding: 0;
		list-style: none;
		width: 55%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: white;
		/* 默认显示；动画开始的时候，设置为隐藏状态 */
		display: block;
	}
	.header .menus li a{
		display: block;
		width: 33.33%;
		float: left;
		height: 3.2rem;
		line-height: 3.2rem;
		text-align: center;
		color: white;
	}
	.header .menus li .router-link-active{
		border-bottom: 0.3rem solid gold;
		color: gold;
	}
	/* .header .menus li{
		width: 33.33%;
		float: left;
		height: 3.5rem;
		line-height: 3.5rem;
		text-align: center;
	} */
	.header .search{
		position: relative;
		right: 0.5rem;
		/* 默认div标签没有宽度，动画开始时，设置到20rem的宽度 */
		width: 2rem;
		height: 2rem;
	}
	.header .search form{
		/* 默认白色背景去掉 动画开始时，设置白色背景 */
		background-color: unset;
		border-radius: 4.5rem;
		height: 2rem;
		overflow: hidden;
	}
	.header .search form input{
		height: 1.9rem;
		border: none;
		border-radius: 4.5rem;
		position: absolute;
		outline: none;
		text-indent: 0.3em;
		z-index: 10;
		/* 默认隐藏 动画开始时输入框显示*/
		display: none;
	}
	.header .search form aside{
		background-color: #2c2d2f;
		width: 1.8rem;
		height: 1.8rem;
		border-radius: 50%;
		float: right;
		text-align: center;
		line-height: 1.8rem;
		border: 0.1rem white solid;
	}
	/* PC端的事件；鼠标事件：手指事件/手势事件touch */
	/* hover属于PC端的鼠标操作，不适合在移动端运行 */
	/* .header .search:hover{ */
		/* 动画的名字 动画的时长 动画的速度 */
		/* animation: formWidth 1s linear; */
	/* } */
	/* 将form宽度从2rem——>16rem */
	@keyframes formWidth{
		/* 宽度从2rem开始 */
		0%{
			width: 2rem;
		}
		/* 到16rem结束 */
		100%{
			width: 20rem;
		}
	}
</style>
